<template>
  <div class="home">
    <div class="home-search flex items-center">
      <img src="@/assets/images/search.png" />
      <el-input
        class="home-search-input"
        v-model="keyword"
        placeholder="输入搜索内容"
      />
      <el-button
        style="height: 42px"
        class="h-full"
        type="primary"
        round
        @click="onSearch"
      >
        搜索
      </el-button>
    </div>

    <div
      class="card"
      v-for="card in cardList"
    >
      <div class="card-header">
        <div class="card-title">{{ card.title }}</div>
        <!-- class="el-icon--right" -->
        <el-link
          class="card-more"
          @click="$router.push('/cate')"
        >
          <span>更多</span>
          <el-icon><ArrowRight /></el-icon>
        </el-link>
      </div>
      <div class="card-content">
        <ul
          class="card-list"
          v-loading="loading"
        >
          <template v-if="card.list?.length">
            <div
              class="list-item"
              v-for="item in card.list"
              @click="onListItem(item)"
            >
              <item-book
                :item-info="item"
                :cover="item.cover"
                :name="item.title"
                :author="item.author"
                :publish="item.publish"
                :coverEmpty="item.coverEmpty"
              />
              <!-- :isbn="item.isbn" -->
            </div>
          </template>
          <template v-else>
            <div class="w-full flex justify-center">
              <el-empty :description="loading ? '数据加载中' : '暂无数据'" />
            </div>
          </template>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search, ArrowRight } from "@element-plus/icons-vue";
import { find } from "@/api/modules/find";
import { getCovers } from "@/utils/cover/cover";
import ItemBook from "@/components/item-book/index.vue";
const { detailInfoUpdate } = inject("detail-store");
const Router = useRouter();
const loading = ref(false);
const keyword = ref();
const cardList = ref([
  {
    title: "热读推荐",
    list: [],
  },
  {
    title: "新书通报",
    list: [],
  },
]);

const onSearch = () => {
  if (keyword.value) {
    Router.push({
      path: "/cate",
      query: {
        keyword: keyword.value,
      },
    });
  } else {
    ElMessage.warning("请输入关键字");
  }
};
const onListItem = (listItem) => {
  detailInfoUpdate({
    recordId: listItem.recordId,
    coverEmpty: listItem.coverEmpty,
    cover: listItem.cover,
  });
  Router.push({
    path: "/detail",
  });
};

async function getCardList() {
  loading.value = true;
  try {
    const hotList = await find.index
      .getHotLoan({
        page: 1,
        rows: 7,
      })
      .then(({ data }) => {
        return getCovers(data.result?.splice(0, 7) || []);
        // data.result
        // getCovers(data.result)
      });
    console.log("hotList", hotList);
    const newBookList = await find.index
      .getNewBook({
        page: 1,
        rows: 7,
        // docCode: "1",
      })
      .then(({ data }) => getCovers(data?.searchResult || []));
    cardList.value.forEach((item, index) => {
      item.list = index ? newBookList : hotList;
    });
    console.log("newBookList", newBookList);
    loading.value = false;
  } catch (error) {
    console.log("error", error);
    loading.value = false;
  }
}
onMounted(() => {
  getCardList();
});
</script>

<style lang="scss" scoped>
.home {
  &-search {
    width: 100%;
    max-width: 1200px;
    height: 56px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: inset 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 999px;
    padding: 12px;
    box-sizing: border-box;
    & > img {
      --siz: 26px;
      width: var(--siz);
      height: var(--siz);
    }
    &-input {
      font-size: 28px;
      //   --el-input-border-color: unset !important;
      //   --el-border-color: unset;
      :deep(.el-input__wrapper) {
        box-shadow: unset;
      }
    }
  }
  .card {
    width: 100%;
    min-height: 400px;
    background: #ffffff;
    border-radius: 8px;
    padding: 32px 24px;
    box-sizing: border-box;
    margin-top: 20px;
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .card-title {
        font-weight: bold;
        font-size: 28px;
      }
      .card-more {
        font-size: 20px;
      }
    }
    &-content {
      margin-top: 20px;
      .card-list {
        width: 100%;
        min-height: 300px;
        display: flex;
        flex-wrap: wrap;
        .list-item {
          display: flex;
          flex: 1;
          justify-content: center;
        }
      }
    }
  }
}
</style>
